<template>
	<!-- 	<view class="share">
		<image src="../../static/share.png" class="share-image" mode="widthFix"></image>
		<view class="code">

			<image src="" mode=""></image>
		</view>
	</view>
	 -->

	<view class="box">
		<l-painter css="width: 702rpx;
			position: relative;" isCanvasToTempFilePath @success="onSuccess" pathType="url" ref="poster" performance>
			<l-painter-image
				src="https://images-checkcar.oss-cn-beijing.aliyuncs.com/2024/06/27/share_20240627095805A001.png" css="width: 702rpx;
				display: block;" />
			<l-painter-view css="width: 504rpx;
				height: 504rpx;
				background: #FFFFFF;
				border-radius: 37rpx;
				position: absolute;
				bottom: 88rpx;
				left: 99rpx;
				display: flex;
				justify-content: center;
				align-items: center;">
				<l-painter-image
					:src="miniProjectCode" css="width: 406rpx;
					height: 406rpx;" />
			</l-painter-view>


		</l-painter>
	</view>
	<view class="footer">
		<!-- <button open-type="share" class="share-btn">
			<view class="item" @click="onShare">
				<image src="../../static/wx.png" mode=""></image>
				<text>微信好友</text>
			</view>
		</button> -->
		<view class="item" @click="onSave">
			<image src="../../static/down.png" mode=""></image>
			<text>保存本地</text>
		</view>
	</view>


</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getMiniQr
	} from '@/api'
	import {
		onLoad,
		onReachBottom,
		onShow,

	} from '@dcloudio/uni-app'
	import {

		onShareAppMessage
	} from '@dcloudio/uni-app'
	const poster = ref()
	const exportImage = ref()
	import {
		wxOpenid,

	} from '@/utils/login-sdk.js'
	onLoad(() => {
		getCodeQR()
	})
	const miniProjectCode = ref()
	const getCodeQR = async () => {
		const {
			openId
		} = await wxOpenid()
		const res = await getMiniQr({
			inviteOpenId: openId
		})
		miniProjectCode.value = res.result
	}
	const onSave = () => {
		wx.saveImageToPhotosAlbum({
			filePath: exportImage.value,
			success(res) {
				console.log(res)
			}
		})
	}
	const onShare = () => {
		poster.value.canvasToTempFilePathSync({
			fileType: "jpg",
			// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
			pathType: 'url',
			quality: 1,
			success: (res) => {

				exportImage.value = res.tempFilePath

			},
			fail: (err) => {
				console.log(err)
			}
		});
	}
	const onSuccess = (e) => {
		exportImage.value = e
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;

	}

	.box {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}

	.share {
		width: 702rpx;
		margin: 30rpx auto;
		position: relative;

		.share-image {
			width: 702rpx;
			display: block;
		}

		.code {
			width: 504rpx;
			height: 504rpx;
			background: #FFFFFF;
			border-radius: 37rpx;
			position: absolute;
			bottom: 88rpx;
			left: 99rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 406rpx;
				height: 406rpx;
				background: pink;
			}
		}
	}

	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 49rpx;

		.share-btn {

			display: block;
			background: transparent;
			padding: 0;
			margin: 0;
			margin-right: 188rpx;
			height: 152rpx;

			&::after {
				border: none;
				height: 152rpx;
			}
		}

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 100rpx;
				height: 100rpx;
				display: block;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 28rpx;
				color: #1C1C1C;
				line-height: 1;
			}
		}
	}
</style>